<template>
    <view class="bg">
        <image src="../../static/img/login.png" class="bgBox" mode="" />

        <view class="title">
            <view class="hello">你好</view>
            <view class="welcome">欢迎来到股票全球...</view>
        </view>
        <view class="form-login">
            <view class="username">
                <!-- 手机号 -->
                <input v-model="form.phone" placeholder-style="color: rgba(255,255,255,0.8);" placeholder="請輸入手機號碼"
                    type="text">
            </view>
            <!-- 验证码 -->
            <!-- <view class="password">
                <input v-model="form.yzmCode" type="text">
            </view> -->
            <view class="password">
                <!-- 密码 -->
                <input v-model="form.userPwd" placeholder-style="color: rgba(255,255,255,0.8);" placeholder="請輸入密碼"
                    :type="type">
                <image class="icon eye-close" src="../../static/icon/eye.png" @click="switchEye(false)" mode=""
                    v-if="flag" />
                <image class="icon eye" src="../../static/icon/eye_close.png" mode="" @click="switchEye(true)" v-else />
            </view>
            <view class="password">
                <!-- 确认密码 -->
                <input v-model="userPwdRe" placeholder-style="color: rgba(255,255,255,0.8);" placeholder="請再次輸入密碼"
                    :type="type1">
                <image class="icon eye-close" src="../../static/icon/eye.png" @click="switchEye1(false)" mode=""
                    v-if="flag1" />
                <image class="icon eye" src="../../static/icon/eye_close.png" mode="" @click="switchEye1(true)" v-else />
            </view>
            <view class="password">
                <!-- 确认邀请码 -->
                <input v-model="form.agentCode" placeholder-style="color: rgba(255,255,255,0.8);" placeholder="請輸入邀請碼"
                    type="text">
            </view>
        </view>

        <view class="user-btn">
            <button class="submit" @click="submit">注册</button>
            <view class="register">已有账号？ <text @click="goLogin">去登录</text></view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { requestApi } from '@/api';
import { setToken, toast } from '@/utils/storage';

const flag = ref(false)
const flag1 = ref(false)
const type = ref('password')
const type1 = ref('password')
function switchEye(bool) {
    flag.value = bool
    switch (flag.value) {
        case true:
            type.value = 'text'
            break;
        case false:
            type.value = 'password'
            break;
        default:
            break;
    }
}
function switchEye1(bool) {
    flag1.value = bool
    switch (flag1.value) {
        case true:
            type1.value = 'text'
            break;
        case false:
            type1.value = 'password'
            break;
        default:
            break;
    }
}

// 表单验证规则
const rules = reactive({
    phone: [
        {
            rule: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
        },
    ],
    userPwd: [
        {
            rule: /^.{2,18}$/,
            message: "密码长度在 2 到 18 个字符",
        },
    ],
});
function validate(key) {
    let flag = true;
    rules[key].forEach((v) => {
        if (!v.rule.test(form[key])) {
            flag = false;
            return false;
        }
    });
    return flag;
}
const form = reactive({
    agentCode: '',
    phone: '',
    yzmCode: '123',
    userPwd: '',
})
const userPwdRe = ref('')



const submit = async () => {
    if (!validate("phone")) return; //validate('username')为false才执行
    if (!validate("userPwd")) return; //validate('password')为false才执行
    uni.showLoading({
        title: "加载中",
    });
    if (form.userPwd != userPwdRe.value) {
        toast('兩次密碼不一致')
        return
    }
    const { data, msg, status } = await requestApi.reg(form)
    if (status == 0) {
        const { token } = data
        toast(msg)
        setToken(token)
        uni.switchTab({
            url: '/pages/index/index'
        });
    } else {
        toast(msg)
    }
}

// 去登录
function goLogin() {
    return uni.navigateTo({ url: "/pages/login/login" })
}

</script>

<style lang="scss">
.bg {
    width: 100%;
    height: 100vh;
    position: relative;

    .bgBox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    .title {
        position: fixed;
        top: 293rpx;
        left: 65rpx;
        width: 319rpx;
        height: 151rpx;
        color: #fff;

        .hello {
            font-size: 70rpx;
        }

        .welcome {
            font-size: 36rpx;
            font-weight: 400;
        }
    }

    .form-login {
        position: fixed;
        top: 589rpx;
        left: 40rpx;
        width: calc(100% - 80rpx);
        height: 45rpx;

        input {
            border-bottom: solid 2rpx rgba(255, 255, 255, .5);
            padding: 0rpx 15rpx;
            height: 100rpx;
            color: #fff;
        }

        .password {
            position: relative;

            .icon {
                width: 40rpx;
                height: 32rpx;
                position: absolute;
                top: calc(50% - 16rpx);
                right: 0;
            }
        }
    }

    .user-btn {
        position: fixed;
        top: 1226rpx;
        left: calc(50% - 250rpx);

        .submit {

            width: 500rpx;
            height: 96rpx;
            line-height: 96rpx;
            border-radius: 96rpx;
            background-color: #fff;
            text-align: center;
            color: #0536C1;
        }

        .register {
            text-align: center;
            margin-top: 62rpx;
            color: #ced7f7;
            font-weight: 200;
        }
    }

}</style>